<script setup lang="ts">
defineOptions({
  name: "tree"
});
import { ref, reactive, onMounted, nextTick } from "vue";
import { useRouterStoreHook } from "@/store/modules/router";
import { getPipeList } from "@/api/modules/fab";

const routerStore = useRouterStoreHook();
const topologyTreeRef = ref(null);
const currentNodeKey = ref<string>("");
const treeData = ref<Array<any>>([]);
const defaultProps = {
  children: "children",
  label: "name"
};

const init = async () => {
  treeData.value.splice(0);
  const classEnum = routerStore.subject === "ALL" ? "" : routerStore.subject;
  const params = classEnum ? { classEnum } : null;
  const res = await getPipeList(params);
  res && treeData.value.push(...res);
};

const handleNodeClick = node => {
  currentNodeKey.value = node.id;
};

onMounted(async () => {
  await init();
});
</script>

<template>
  <px-tree
    ref="topologyTreeRef"
    highlight-current
    node-key="id"
    :current-node-key="currentNodeKey"
    :data="treeData"
    :props="defaultProps"
    @node-click="handleNodeClick"
  />
</template>

<style lang="scss" scoped>
:deep(.px-tree-node) {
  &.is-current.is-focusable > .px-tree-node__content .px-tree-node__label {
    color: var(--px-color-primary) !important;
  }
}
</style>
